@use "../../assets/scss/mixins/base" as mx;
html {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}

$black: rgb(20, 21, 33);
$blackOpaque: rgba(20, 21, 33, 0.8);
$blue: #03518a;
$blueDark: #022e4e;
$green: rgb(31, 164, 152);
$greenOpaque: rgba(31, 164, 152, 0.6);
$purple: rgb(157, 78, 221);
$greenDark: darken($green, 32%);
$white: rgba(255, 250, 250, 0.9);
$whiteOpaque: rgba(255, 250, 250, 0.5);

$background: linear-gradient($black, $blueDark, $blue);
$backgroundBorealis: linear-gradient(transparent, $greenOpaque) 0 100% / 100%
  60%;

$stars: radial-gradient($white 70%, transparent 70%) 3% 70% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 7% 60% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 3% 47% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 26% 65% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 20% 50% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 12% 53% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 10% 40% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 24% 34% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 38% 35% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 24% 48% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 7% 30% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 2% 20% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 5% 4% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 10% 15% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 15% 8% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 20% 20% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 80% 36% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 84% 50% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 97% 50% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 85% 40% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 90% 54% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 50% 40% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 55% 49% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 48% 55% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 33% 45% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 80% 60% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 88% 70% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 30% 24% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 30% 10% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 15% 30% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 38% 3% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 68% 30% / 0.2% 0.2%,
  radial-gradient($white 70%, transparent 70%) 90% 32% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 85% 10% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 60% 16% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 88% 12% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 96% 5% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 75% 18% / 0.2% 0.25%,
  radial-gradient($white 70%, transparent 70%) 47% 14% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 54% 10% / 0.2% 0.25%,
  radial-gradient($whiteOpaque 70%, transparent 70%) 53% 23% / 0.2% 0.25%;

@mixin sharedMountain {
  position: absolute;
  background: linear-gradient(darken($blueDark, 1%), transparent);
  clip-path: polygon(49% 0, 51% 0, 100% 100%, 0 100%);
  border-radius: 50% 50% 0 0;
  z-index: 2;
  @include mx.pseudo-ba {
    width: 100%;
  }
  &::before {
    height: 100%;
    right: 5%;
    background: inherit;
    clip-path: inherit;
    border-radius: inherit;
  }
  &::after {
    height: 15%;
    background: linear-gradient($whiteOpaque, transparent);
  }
}
@mixin sharedTree {
  position: absolute;
  width: 0.5%;
  bottom: 0;
  background: linear-gradient($greenDark, $black);
  z-index: 3;
  &::before {
    content: "";
    position: absolute;
    @include mx.rect(800%, 100%, $greenDark);
    top: -5%;
    left: -350%;
    clip-path: polygon(
      50% 0%,
      0% 30%,
      50% 30%,
      0% 60%,
      50% 60%,
      0% 90%,
      50% 90%,
      100% 90%,
      50% 60%,
      100% 60%,
      50% 30%,
      100% 30%
    );
  }
}
@mixin sharedLight {
  position: absolute;
  width: 5%;
  height: 100%;
  bottom: 8%;
  filter: blur(60px);
  background: radial-gradient($green 40%, transparent);
  opacity: 0.6;
}

.scene {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: $backgroundBorealis, $stars, $background;
  background-repeat: no-repeat;
  .mountain {
    @include sharedMountain;
    bottom: 0;
    &:nth-of-type(1) {
      width: 50%;
      height: 40%;
      left: -10%;
    }
    &:nth-of-type(2) {
      background: linear-gradient($blueDark, $blackOpaque);
      width: 60%;
      height: 50%;
      left: 10%;
      z-index: 3;
    }
    &:nth-of-type(3) {
      width: 50%;
      height: 65%;
      left: 40%;
    }
    &:nth-of-type(4) {
      background: linear-gradient($blueDark, $blackOpaque);
      width: 30%;
      height: 40%;
      right: -10%;
    }
  }
  .tree {
    @include sharedTree;
    &:nth-of-type(1) {
      right: 25%;
      height: 20%;
    }
    &:nth-of-type(2) {
      right: 20%;
      height: 15%;
    }
  }
  .lights {
    height: 100%;
    width: 100%;
    animation: slide 15s ease-in-out infinite;
    .borealis {
      @include sharedLight;
      &:nth-of-type(1) {
        left: 0;
        animation: grow 30s ease-in-out infinite;
      }
      &:nth-of-type(2) {
        left: 20%;
        animation: grow 15s ease-in-out infinite;
      }
      &:nth-of-type(3) {
        left: 40%;
        animation: grow 30s ease-in-out infinite;
      }
      &:nth-of-type(4) {
        left: 60%;
        animation: grow 20s 3s ease-in-out infinite;
      }
      &:nth-of-type(5) {
        left: 80%;
        animation: grow 25s ease-in-out infinite;
      }
      &:nth-of-type(6) {
        left: 97%;
        animation: grow 20s 8s ease-in-out infinite;
      }
      &:nth-of-type(7) {
        background: radial-gradient($purple 40%, transparent);
        transform: translateX(-200%);
        animation: slideFullRight 25s ease-in-out infinite;
        opacity: 0.3;
      }
      &:nth-of-type(8) {
        background: radial-gradient($purple 40%, transparent);
        transform: translateX(-200%);
        animation: slideFullRight 25s 8s ease-in-out infinite;
        opacity: 0.4;
      }
      &:nth-of-type(9) {
        left: unset;
        right: 0;
        transform: translateX(200%);
        background: radial-gradient(lighten($blue, 3%) 40%, transparent);
        animation: slideFullLeft 18s 58s ease-in-out infinite;
      }
    }
  }
}

@keyframes slide {
  0%,
  100% {
    transform: translate(-2%);
  }
  50% {
    transform: translate(2%);
  }
}
@keyframes grow {
  50% {
    width: 2%;
    opacity: 0.4;
  }
}
@keyframes slideFullRight {
  from {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(2000%);
  }
}
@keyframes slideFullLeft {
  from {
    transform: translateX(200%);
  }
  to {
    transform: translateX(-2000%);
  }
}
